<template>
    <div class="personal-center">
        <div class="personal-center-title" v-if="permissions[11].type">
            <h3>成员管理</h3>
        </div>
        <div class="manage_box" v-if="permissions[11].type">
            <div class="manage_inf">
                <div>
                    <ul class="manage_item">
                        <li>成员管理:</li>
                        <li class='manage_item_default'>姓名</li>
                        <li class='manage_item_default'>手机号码</li>
                        <li class='manage_item_default'>角色权限</li>
                        <li></li>
                    </ul>
                    <!--隐藏元素用于绑定事件-->
                    <div id="getEmployees" style="display:none" @click="req()"></div>
                    <div class="manage_infB">
                        <ul class="manage_item" v-for='(ite,index) in Olist'>
                            <li></li>
                            <li class='manage_item_default' :class="[{manage_item_change:state.change},{manage_item_emergency:ite.fault[0]}]"><input type="text" @input="fault(ite.id,0)" name="" :disabled="!state.change" placeholder='请输入名字' v-model='ite.name' class='manage_item_s'></li>
                            <li class='manage_item_default' :class="{manage_item_change:state.change,manage_item_emergency:ite.fault[1]}"><input type="text" @input="fault(ite.id,1)" name="" :disabled="!state.change" maxlength="11" minlength="11" placeholder='输入11位常用手机号码' v-model='ite.phone'  class='manage_item_s'></li>
                            <li class='manage_item_default' :class="{manage_item_icon:state.change,manage_item_change:state.change}" @click='manage_choose(ite.id)'>
                                <div class='manage_item_s'>{{ite.permissions}}</div>
                                <manageMenu class='manage_menu' v-on:menuName='menuName' v-if='ite.show&&state.change' :listN='ite.nameList'></manageMenu>
                            </li>
                            <li class='manage_item_delete' @click='item_delete(ite.id)'>&#xe84b;</li>
                        </ul>
                    </div>
                    <div class="manage_page">
                        <div class="manage_page_fixed" v-if="!pageShow">    <!-- 固定分页下标 -->
                            <div v-for="num in pageLength" :class="{manage_page_color:(num==setColor)}" @click="manage_search(num-1)">{{num}}</div>
                        </div>
                        <div class="manage_page_p" v-if="pageShow">   <!-- 动态分页下标 -->
                            <div class="manage_page_p0" @click="manage_pageT">&#xe6b4;</div>
                            <div class="manage_page_fixed">
                                <div v-for="num in pageLength" :class="{manage_page_color:(num==setColor)}" @click="manage_search(pageIndex*12+num-1)">{{(pageIndex)*12+num}}</div>
                            </div>
                            <div class="manage_page_p1" @click="manage_pageL">&#xe6b3;</div>
                        </div>
                    </div>
                    <adduser v-if="state.add" v-on:addOne="addOne" :opda="thName"></adduser>
                    <div class='manage_item' v-if="state.add">
                        <div class='manage_item_placeholder'></div>
                        <div>
                            <div class='manage_item_waring'><span v-if="tip.show" class="manage_item_height"><span class='manage_item_waringIcon'>&#xe64a;&nbsp;</span>{{tip.text}}</span></div>
                            <div class="manage_item_qd">
                                <div class='personal-information-determine information-qe nice-btn-lBlue' @click="add_user">确定</div>
                                <div class='personal-information-cancel information-of cancel-btn-ordinary' @click="add_cancel">取消</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='manage_item' v-show="!state.add&&!state.change||state.change">
                    <div class='manage_item_placeholder'></div>
                    <div v-if="state.change||state.add">
                        <div class='manage_item_waring'><span v-if="tip.show" class="manage_item_height"><span class='manage_item_waringIcon'>&#xe64a;&nbsp;</span>{{tip.text}}</span></div>
                        <div class="manage_item_qd">
                            <div class='personal-information-determine information-qe nice-btn-lBlue' @click="change_save">确定</div>
                            <div class='personal-information-cancel information-of cancel-btn-ordinary' @click="change_cancel">取消</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="manage_editor">
                <div class='manage_search_box'>
                    <div class='manage_search' :class="{manage_search_default:!state.search}">
                        <div class='manage_search_icon manage_search_icon1' @click="csh">&#xe6a8;</div>
                        <div class='manage_search_input' v-if="state.search"><input type="text" v-model="search_name" name=""></div>
                        <div class='manage_search_icon manage_search_icon2' v-if="state.search" @click="csearch_name">&#xe664;</div>
                    </div>
                    <div class='manage_operation' @click="openChange" v-show="!state.add&&!state.change||state.change">&#xe65a;</div>
                    <div class='manage_operation' @click="addItem" v-show="!state.add&&!state.change||state.add">&#xe6b0;</div>
                </div>
            </div>
        </div>
        <roles v-if="permissions[12].type" v-on:change_role="change_role"></roles>
    </div>
</template>
<script>
    import * as vx from 'vuex'

    import manageMenu from './../../../component/dropDownMenu.vue'
    import adduser from './addUser.vue'
    import roles from './membersRole.vue'

    let filter = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    export default{
        data(){
            return{
                search_name:"",
                setColor:0,
                thName:{
                    name:[],
                    id:[]
                },
                tip:{
                    show:false,
                    text:'手机号码格式有误或者手机号码已经存在，请重新输入'
                },
                state:{
                    search:false,
                    add:false,
                    change:false,
                },
                addData:'',
                search_nameC:"",
                initialList:[],
                OmembeList:'',
                membeList:'',
                p1:'',
                indexd:0,
                pageIndex:0,
                allpageIndex:0,
                allbigPage:0,
                pageLength:0,
                personal_role:{
                    Olist:[],
                    Tlist:[],
                    set:false
                },
                allRole:''
            }
        },
        mounted:function () {
           this.req();
        },
        computed:{
            ...vx.mapGetters([
                'permissions'
            ]),
            Olist:function () {
                return this.OmembeList.slice((this.indexd)*12,(this.indexd+1)*12);
            },
            pageShow:function () {
               (this.OmembeList.length%12 == 0) ? this.allpageIndex=parseInt(this.OmembeList.length/12) : this.allpageIndex=parseInt(this.OmembeList.length/12+1);
               (this.allpageIndex%12 == 0) ? this.allbigPage=parseInt(this.allpageIndex/12) : this.allbigPage=parseInt(this.allpageIndex/12+1);
               if(this.OmembeList.length>144){
                   if((this.pageIndex+1)<this.allbigPage){
                       this.pageLength=12;
                   }else {
                       this.pageLength=this.allpageIndex-(12*this.pageIndex);
                   }
                   return true;
               }else {
                   this.pageLength=this.allpageIndex;
                   return false;
               }
            }
        },
        watch:{
            search_name:function () {
                let arr=[];
                for(let i=0;i<this.search_nameC.length;i++){
                    if(this.search_nameC[i].name.toUpperCase().indexOf(this.search_name.toUpperCase())!=-1||this.search_nameC[i].permissions.toUpperCase().indexOf(this.search_name.toUpperCase())!=-1||this.search_nameC[i].phone.toUpperCase().indexOf(this.search_name.toUpperCase())!=-1){
                        arr.push(this.search_nameC[i]);
                    }
                }
                this.OmembeList=arr;
            }
        },
        methods:{
            csh:function () {
                this.state.search=true;
                this.OmembeList=this.search_nameC;
            },
            csearch_name:function () {
                this.state.search=false;
                this.OmembeList=this.search_nameC;
            },
            req:function () {
                $.ajax({
                    url:'/getEmployees',
                    type:'post',
                    dataType:'json',
                    success:(data)=>{
                        this.OmembeList=[];
                        let names=[];
                        let id=[];
                        for(let i=0;i<data.list.length;i++){
                            names=[];
                            id=[];
                            let permissions='';
                            let permissionsNumber='';
                            data.list[i].roles.forEach((val)=>{
                                names.push(val.name);
                                id.push(val.id);
                                if(val.type==1){
                                    permissions=val.name;
                                    permissionsNumber=val.id;
                                }
                            });
                            this.OmembeList.push(  {
                                name:(data.list[i].compellation==''||data.list[i].compellation==null? "成员":data.list[i].compellation),
                                id:data.list[i].id,
                                phone:(data.list[i].phone==''||data.list[i].phone==null? "13000000000":data.list[i].phone),
                                permissions:permissions,
                                permissionsNumber:permissionsNumber,
                                show:false,
                                fault:[false,false],
                                nameList:{
                                    id:id,
                                    name:names
                                }
                            })
                        };
                        // 组装添加数据
                        this.thName.name=names;
                        this.thName.id=id;
                        this.initialList=JSON.parse(JSON.stringify(this.OmembeList));   //最初始的值
                        this.search_nameC=JSON.parse(JSON.stringify(this.OmembeList));
                        this.manage_search(0);
                    }
                });
            },
            change_role:function () {
                this.req();
            },
            openChange:function () {
                if(this.OmembeList.length>0){
                    this.state.change=true;
                }
            },
            fault:function (id,val) {
                if(val==0){
                    for(let i=0;i<this.OmembeList.length;i++){
                        if(this.OmembeList[i].id==id){
                            if(this.OmembeList[i].name.replace(/(^\s*)|(\s*$)/g, "")==""){
                                this.OmembeList[i].fault[0]=true;
                            }else {
                                this.OmembeList[i].fault[0]=false;
                            }
                        }
                    }
                }else if(val==1){
                    for(let i=0;i<this.OmembeList.length;i++){
                        if(this.OmembeList[i].id==id){
                            if(this.OmembeList[i].phone==''||!filter.test(this.OmembeList[i].phone)){
                                this.OmembeList[i].fault[1]=true;
                            }else {
                                this.OmembeList[i].fault[1]=false;
                            }
                        }
                    }
                }
            },
            addOne:function (val) {
                this.addData=val;
            },
            add_user:function () {
                if(this.addData.name.replace(/(^\s*)|(\s*$)/g, "")==""){
                    this.tip.text='名字不能为空';
                    this.tip.show=true;
                    setTimeout(()=>{this.tip.show=false;},1500)
                }else if(this.addData.phone==''){
                    this.tip.text='手机号码不能为空';
                    this.tip.show=true;
                    setTimeout(()=>{this.tip.show=false;},1500)
                }else if(!filter.test(this.addData.phone)){
                    this.tip.text='手机格式不正确';
                    this.tip.show=true;
                    setTimeout(()=>{this.tip.show=false;},1500)
                }else{
                    for(let i=0;i<this.OmembeList.length;i++){
                       if(this.OmembeList[i].phone==this.addData.phone){
                           alert('对不起，添加的手机号码已经存在了');
                           return false;
                       }
                    };
                    let dates={
                        compellation:this.addData.name,
                        phone:this.addData.phone,
                        rolestr:this.addData.permissionsNumber
                    };
                    $.ajax({
                        url:"/roleEmployeeAdd",
                        type:"post",
                        dataType:"json",
                        data:dates,
                        success:(val)=>{
                            if(val.opResult==4){
                                alert('添加的用户手机号码已经绑定过');
                            }else if(val.opResult==0){
                                this.req();
//                                this.addData.id=val.id;
//                                this.OmembeList.push(JSON.parse(JSON.stringify(this.addData)));
//                                this.initialList=JSON.parse(JSON.stringify(this.OmembeList));
                                this.addData={name:'',phone:'',permissionsNumber:''};
                                this.state.add=false;
                            }else{
                                alert('添加失败');
                            }
                        }
                    });
                    // 添加上传数据
                }
            },
            addItem:function () {
                this.state.add=true;
                this.state.change=false;
            },
            add_cancel:function(){
                this.state.add=false;
                this.addData={name:'',phone:'',permissionsNumber:''};
            },
            change_cancel:function () {
                this.OmembeList=JSON.parse(JSON.stringify(this.initialList));   //最初始的值
                this.manage_search(this.indexd);
                this.state.add=false;
                this.state.search=false;
                this.state.change=false;
            },
            change_save:function () {
                for(let i=0;i<this.OmembeList.length;i++){
                    if((this.OmembeList[i].name.replace(/(^\s*)|(\s*$)/g, "")=="")){
                        this.tip.text='请完成红色文本框的信息！';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                        break;
                    }else if(this.OmembeList[i].phone==''){
                        this.tip.text='请完成红色文本框的信息！';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                        break;
                    }else if(filter.test(this.OmembeList[i].phone)==false){
                        this.tip.text='请完成红色文本框的信息！';
                        this.tip.show=true;
                        setTimeout(()=>{this.tip.show=false;},1500);
                        break;
                    }else {
                        if(i+1==this.OmembeList.length){
                            let arr=[];
                            for(let i=0;i<this.OmembeList.length;i++){
                               for(let j=0;j<this.initialList.length;j++){
                                    if(this.OmembeList[i].id==this.initialList[j].id){
                                        if(this.OmembeList[i].name!=this.initialList[j].name||this.OmembeList[i].phone!=this.initialList[j].phone||this.OmembeList[i].permissionsNumber!=this.initialList[j].permissionsNumber){
                                            arr.push({
                                                id:this.OmembeList[i].id,
                                                compellation:this.OmembeList[i].name,
                                                phone:this.OmembeList[i].phone,
                                                roleId:this.OmembeList[i].permissionsNumber
                                            })
                                        }
                                    }
                               }
                            }
                            if(arr.length!=0){
                                $.ajax({
                                    type:'post',
                                    dataType:'json',
                                    url:'/roleEmployeeUpdate',
                                    data:{
                                        empstr:JSON.stringify(arr)
                                    },
                                    success:(val)=>{
                                        if(val.opResult==0){
                                            this.initialList=JSON.parse(JSON.stringify(this.OmembeList));
                                            this.state.add=false;this.state.search=false;this.state.change=false;
                                        }else {
                                            alert('修改失败');
                                        }
                                    }
                                })
                            }else {
                                this.change_cancel();
                            }
                        }
                    }
                }
            },
            item_delete:function(id){
                if(confirm("确认要删除？")){
                    for(let i=0;i<this.OmembeList.length;i++){
                        if(this.OmembeList[i].id==id){
                            console.log(this.OmembeList[i])
                            $.ajax({
                                url:'/roleEmployeeDelete',
                                data:{
                                    empId:id,
                                    roleId:this.OmembeList[i].permissionsNumber
                                },
                                type:'post',
                                success:(data)=>{
                                    if(data.opResult==0){
                                        this.OmembeList.splice(i,1);
                                        this.initialList=JSON.parse(JSON.stringify(this.OmembeList));
                                        if(this.Olist.length==0){
                                            this.manage_search(this.pageLength-2);
                                        }
                                    }else{
                                        alert('删除失败')
                                    }
                                }
                            });
                            break;
                        }
                    }
                }
            },
            menuName:function(val){
                for(let i=0;i<this.OmembeList.length;i++){
                    if(this.OmembeList[i].id==this.p1){
                        this.OmembeList[i].permissions=val.val;
                        this.OmembeList[i].permissionsNumber=val.id;
                        this.OmembeList[i].show=false;
                        break;
                    }
                }
            },
            manage_choose:function(id){
                this.p1=id;
                for(let i=0;i<this.OmembeList.length;i++){
                    if(this.OmembeList[i].id==id){
                        if(this.OmembeList[i].show==true){
                            this.OmembeList[i].show=false;
                            break;
                        }
                        this.OmembeList[i].show=true;
                    }else {
                        this.OmembeList[i].show=false;
                    }
                }
            },
            manage_pageT:function () {
                if(this.pageIndex>0){
                    this.pageIndex--;
                }
            },
            manage_pageL:function () {
                if(this.pageIndex<(this.allbigPage-1)){
                    this.pageIndex++;
                }
            },
            manage_search:function (val) {
                this.setColor=val+1;
                for(let i=0;i<this.Olist.length;i++){
                    if(this.Olist[i].fault[0]==true||this.Olist[i].fault[1]==true){
                        if(confirm("翻页将请重置未修改完成的数据")){
                            this.OmembeList=JSON.parse(JSON.stringify(this.initialList));
                            this.indexd=val;
                            return false;
                        }
                    }
                }
                this.indexd=val;
            }
        },
        components:{
            manageMenu:manageMenu,
            adduser:adduser,
            roles:roles
        }
    }
</script>
<style>

    /* 角色成员管理 */
    .personal_role_box{
        padding:20px 0px 130px 0px;
    }
    .personal_role_icon{
        display:flex;
        justify-content:center;
        align-items:center;
        flex:1;
    }
    .personal_role_one{
         display:flex;
         flex-direction:column;
     }
    .personal_role_one>div{
        display:flex;
    }
    .personal_role_input{
        background-color:transparent;
        outline: none;
        border: none;
        text-align: center;
        color:white;
    }
    .personal_role_item1{
        width:120px;
        height:20px;
        display:flex;
        justify-content: center;
        color:white;
        font-size:12px;
        align-items:center;
        margin: 3px 1.5px 3px 1.5px;
    }
    .personal_role_item2{
        width:363px;
        height:20px;
        display:flex;
        justify-content: center;
        color:white;
        font-size:12px;
        align-items:center;
        margin: 3px 1.5px 3px 1.5px;
        position: relative;
    }
    .personal_role_item3{
        width: 20px;
        flex: none !important;
        font-family: 'icon';
        font-size: 12px;
        color: #d65239;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
    }
    .personal_role_item4{
        width: 20px;
        flex: none !important;
        font-family: 'icon';
        font-size: 13px;
        color: #7ebce9;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
    }
    .personal_role_item4:hover{
        color: #6bcde9;
    }
    .personal_role_item{
        display:flex;
    }
    .personal_role_content{
        flex:1;
    }
    .personal_role{
        display:flex;
    }
    .personal_role_perch{
        width:150px;
    }


    /*  */
    .manage_item_height{
        height:13px;
    }
    .manage_item_qd{
        /*margin-top: 20px;*/
    }
    .manage_page_p{
        display:flex;
    }
    .manage_page_p0,.manage_page_p1{
        width:20px;
        height:20px;
        display:flex;
        justify-content: center;
        align-items: center;
        color:white;
        font-size:12px;
        font-family:'icon';
    }
    .manage_page_fixed{
        display:flex;
        width: 100%;
        justify-content: center;
    }
    .manage_page_fixed>div{
        width:20px;
        height:20px;
        background-color:#1b375a;
        font-size:12px;
        display:flex;
        justify-content: center;
        color:white;
        margin:0px 1.5px 0px 1.5px;
    }
    .manage_page_fixed>div:hover,.manage_page_p0:hover,.manage_page_p1:hover{
        background-color:white;
        color:#1b375a;
        cursor:pointer;
    }
    .manage_page{
        display:flex;
        margin: 10px 0px 20px 150px;
        flex-flow: column nowrap;
    }
    .manage_menu{
        position: absolute;
        top: 100%;
        z-index:5;
    }
    .manage_search_box{
        display:flex;
        justify-content:flex-end;
        padding-right: 27px;
    }
    .manage_search_icon{
        font-family: 'icon';
        font-size:12px;
        line-height:100%;
        display: flex;
        flex-flow:row nowrap;
        align-items:center;
        justify-content:center;
        cursor:pointer;
    }
    .manage_search_icon1{
        width:22px;
        color:#6179a2;
    }
    .manage_search_icon1:hover{
        background-color:#1b375a;
    }
    .manage_search_icon2{
        width:12px;
        color:white;
        background-color:#1b375a;
    }
    .manage_search_icon2:hover{
        color:#7dc4f0;
        background-color:#21354f;
    }
    .manage_search_input{
        width: 116px;
        display: flex;
    }
     .manage_search_input>input{
        width:100%;
        background: transparent;
        border:none;
        outline:none;
        color:white;
        font-size: 12px;
        height: 100%;
        line-height:100%;
        padding:0;
    }
    .manage_search{
        height:22px;
        display:flex;
        width:150px;
        flex-direction:row;
        background-color:#12223a;
    }
    .manage_search_default{
        width: 22px;
    }
    .manage_operation{
        font-family: 'icon';
        font-size:12px;
        color:#6179a2;
        width: 22px;
        display:flex;
        margin-left: 5px;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        cursor:pointer;
    }
    .manage_operation:hover{
        color:#7dc4f0;
    }
    .manage_item_change{
        background-color:#1b375a;
    }
    .manage_item_change:hover{
        cursor:pointer;
    }
    .manage_item_placeholder{
        width:150px;
        height:150px;
    }
    .manage_item_waring{
        color:#d65239;
        line-height:100%;
        padding: 15px 0px 0px 0px;
        font-size:12px;
    }
    .manage_item_waringIcon{
        font-family: 'icon';
        font-size:12px;
    }
    .manage_box{
        padding-top:30px;
        height:auto;
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction:row;
    }
    .manage_inf{
        width:542px;
    }
    .manage_infB{
        min-height:150px;
    }
    .manage_editor{
        flex:1;
    }
    .manage_item{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-direction: row;
        font-size: 12px;
    }
    .manage_item>li{
        height: 22px;
        line-height:22px;
        color:white;
    }
    .manage_item>li:nth-child(1){
        width:170px;
        text-align: center;
    }
    .manage_item_default{
        margin:3px 1.5px 3px 1.5px;
        flex: 1;
        text-align: center;
        position: relative;
        border:1px solid transparent;
    }
    .manage_item_emergency{
        border:1px solid red;
    }
    .manage_item_icon:after{
        content: '\e663';
        font-family: 'icon';
        font-size:12px;
        color:#7dc4f0;
        position: absolute;
        top:0px;
        right:5px;
        transform: rotate(-90deg) scale(0.8);
    }
     .manage_item>li:last-of-type{
        width:20px;
        flex: none !important;
        font-family:'icon';
        font-size:12px;
        color:#d65239;
        text-align: center;
        line-height: 25px;
        cursor: pointer
     }
    .manage_item>li:last-of-type:hover{
        color:#7dc4f0;
    }
    .manage_item_s{
        text-align: center;
        background-color:transparent;
        border:none;
        outline: none;
        color:white;
        width:100%;
        font-size:12px;
    }
    .manage_page_color{
        background-color: white !important;
        color: #929695 !important;
    }
</style>
